<!-- 登录页 -->
<template>
    <div class="container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" ref="loginform" :model="loginInfo" :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎登陆</h2>
                    <el-form-item prop="username">
                        <el-input v-model="loginInfo.username" placeholder="请输入账号" :prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginInfo.password" placeholder="请输入密码" :prefix-icon="Lock"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- disables设置按钮是否可点击，防止重复点击 -->
                        <el-button :disabled="loading" :loading="loading" class="login_btn" type="primary"
                            @click="Login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
// 获取user小仓库
import useUserStore from '@/store/modules/user'
// 获取路由器和路由对象
import { useRouter, useRoute } from 'vue-router';
import { ElNotification } from 'element-plus';
// 登录成功的打招呼
import { getTimeHi } from '@/utils/time';
// 登录信息
let loginInfo = reactive({
    username: 'admin',
    password: '111111'
})
// 表单对象
let loginform = ref();
// 用户小仓库
let userStore = useUserStore();
// 路由器
let $router = useRouter();
let $route = useRoute();
// “登录”按钮加载效果
let loading = ref(false);

// 点击按钮登录
const Login = async () => {
    // 表单校验通过后，在发请求(form包含一个validate方法，接收一个回调函数或返回Promise)
    await loginform.value.validate();

    // 设置登录按钮加载效果
    loading.value = true
    try {
        await userStore.userLogin(loginInfo);
        // 编程时导航，跳转到首页
        // 判断登录时，路由路径中是否有query参数：有则往query参数路径跳转，否则跳转到首页
        let redirect: any = $route.query.redirect;
        $router.push(redirect || '/');
        // 提示登录成功
        ElNotification({
            type: 'success',
            message: '欢迎回来',
            title: `Hi，${getTimeHi()}`
        })
        loading.value = false
    } catch (error) {
        loading.value = false
        // 提示登录失败
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
}

// 自定义校验规则函数
const validatorUserName = (rule: any, value: string, callback: any) => {
    /*
        rule：校验规则对象
        value：表单内容
        callback：回调函数。符合条件直接callback，不符合条件则callback注入错误提示信息
    */
    // if (/^[A-Za-z0-9]{5,12}$/.test(value)) callback();
    // else callback(new Error("账号应为5~12位大小写英文或数字"));
    if (value.trim().length >=5) callback()
    else callback(new Error('用户名至少5位'))
}

// 表单校验规则
const rules = {
    /* required：是否必须
    max：最大长度
    min：最小长度
    trigger：触发时机
    message：错误时的提示信息
    - validator：自定义校验规则函数
    */
    username: [
        { required: true, validator: validatorUserName, trigger: 'change' }
    ],
    password: [
        { required: true, min: 6, message: '密码至少为6位', trigger: "change" }
    ]
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 30px;
        border-radius: 20px;

        h1 {
            color: white;
            font-size: 40px;
            margin-bottom: 20px;
        }

        h2 {
            color: white;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .login_btn {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 25px;
        }

        ::v-deep .el-form-item__error {
            font-size: 15px;
        }
    }
}
</style>